<!--
 * 登录页
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
  <div class="bg">
    <div class="signin">
      <div class="signUp-head">
        <span class="login-title">登录音乐播放系统</span>
      </div>
      <el-form :model="loginForm" ref="loginForm" label-width="70px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"
            @keyup.enter.native="handleLoginIn"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button @click="goSignUp" class="register-btn"><i class="iconfont icon-register-button"></i> 注册</el-button>
          <el-button type="success" @click="handleLoginIn" class="login-btn-main"><i
              class="iconfont icon-login-button"></i> 登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import loginLogo from '../components/LoginLogo'
import { mixin } from '../mixins'
import { loginIn } from '../api/index'

export default {
  name: 'login-in',
  mixins: [mixin],
  components: {
    loginLogo
  },
  data () {
    return {
      loginForm: {
        username: '',       //用户名
        password: '',       //密码
      },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入用户名' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ]
      }
    }
  },
  mounted () {
    this.changeIndex('登录');
  },
  methods: {
    handleLoginIn () {
      let _this = this;
      let params = new URLSearchParams();
      params.append('username', this.loginForm.username);
      params.append('password', this.loginForm.password);
      loginIn(params)
        .then(res => {
          if (res.code == 1) {
            _this.notify('登录成功', 'success');
            _this.$store.commit('setLoginIn', true);
            _this.$store.commit('setUserId', res.data.userMsg.id);
            _this.$store.commit('setUsername', res.data.userMsg.username);
            _this.$store.commit('setAvator', res.data.userMsg.avator);
            setTimeout(function () {
              _this.changeIndex('首页');
              _this.$router.push({ path: '/' });
            }, 2000);
          } else {
            _this.notify('用户名或密码错误', 'error');
          }
        })
        .catch(err => {
          _this.notify('用户名或密码错误', 'error');
        })
    },
    goSignUp () {
      this.changeIndex('注册');
      this.$router.push({ path: '/sign-up' });
    },
    changeIndex (value) {
      this.$store.commit('setActiveName', value);
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.signin {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 40px;
  text-align: center;
}

.signUp-head {
  margin-bottom: 30px;
}

.login-logo {
  width: 80px;
  margin-bottom: 10px;
}

.login-title {
  color: #e75c09;
  font-size: 24px;
  font-weight: bold;
}

.demo-ruleForm {
  width: 100%;
}

.login-btn {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.register-btn,
.login-btn-main {
  width: 48%;
  font-size: 20px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.register-btn {
  background-color: #f4f4f4;
  color: #333;
}

.login-btn-main {
  background-color: #00c853;
  color: white;
}

.register-btn:hover,
.login-btn-main:hover {
  opacity: 0.9;
}
</style>
